<template>
  <div>
    <h3 style="text-align: center">流量趋势显示</h3>
    <div id="TimeLineChart" style="width:100%;height:300px;"></div>
  </div>
</template>

<script>
export default {
  name: 'UserTimeLineChart',
  props:{
    dateList:Array
  },
  data () {
    return {
      myChart: null,
      userTimeLineData:[]
    }
  },
  created() {
    console.log(this.dateList)
    this.$Pubsub.subscribe('UserTimeLineData',(msgName,msg)=>{
      this.userTimeLineData = msg
      this.chartInit();
    })
  },
  methods: {
      chartInit () {
      // if (this.myChart !== null) {
      //   this.myChart.dispose()
      // }
      let seriesData=[];
      let seriesItem={ type: 'line', smooth: false, seriesLayoutBy: 'row' };
      for(let i=0;i<this.userTimeLineData.length-1;i++){
        seriesData.push(seriesItem);
      }
      this.myChart = this.$echarts.init(document.getElementById('TimeLineChart'))
      let option = {

        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: true
        },
        dataset: {
          source: //[myChart]
          this.userTimeLineData
        },
        xAxis: {
          type: 'category', axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: { gridIndex: 0 },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: seriesData

      };
      this.myChart.setOption(option);
    },

  }
}
</script>

<style scoped>

</style>
